<template>
  <view class="order-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="/static/Images/order/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="page-title">订单详情</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 订单状态 -->
    <view class="order-status-card">
      <view class="status-info">
        <view class="status-text">{{ statusInfo.text }}</view>
        <view class="auto-receive-text">{{ statusInfo.autoReceiveText }}</view>
      </view>
      <view class="status-image">
        <image class="delivery-image" src="/static/Images/order/Huoche.png" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 充值进度 -->
    <view class="recharge-progress-card">
      <view 
        v-for="(step, index) in statusInfo.progressSteps" 
        :key="index" 
        :class="['progress-item', step.status]"
      >
        <view class="progress-icon">
          <image 
            class="status-icon" 
            :src="getStatusIcon(step.status)" 
            mode="aspectFit"
          ></image>
        </view>
        <view class="progress-content">
          <view class="progress-title">{{ step.title }}</view>
          <view class="progress-time">{{ step.time || '待处理' }}</view>
        </view>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <!-- <view class="product-info-card">
     
    </view>
     -->
    <!-- 订单信息 -->
    <view class="order-info-card">
      <!-- 商品信息容器 -->
      <view class="product-container">
        <!-- 商品缩略图 -->
        <view class="product-image">
          <image 
            :src="(productInfo && productInfo.imgs && productInfo.imgs.length > 0) ? productInfo.imgs[0] : '/static/Images/default-product.png'" 
            mode="aspectFill"
            class="product-thumb"
          />
        </view>
        <!-- 商品名称 -->
        <view class="product-details">
          <view class="product-name">{{ productInfo ? productInfo.goods_name : '商品信息加载中...' }}</view>
        </view>
      </view>
      <view class="info-item">
        <view class="info-label">实付金额：</view>
        <view class="info-value price">¥{{ orderInfo.amount }}</view>
      </view>
      
      <!-- 卡密订单相关信息 -->
      <template v-if="orderData && orderData.type == 2 && orderData.carmines && orderData.carmines.length > 0">
        <view class="card-info-section">
          <view class="section-title">卡密信息</view>
          <view class="card-item" v-for="(carmine, index) in orderData.carmines" :key="index">
            <!-- 卡号信息 -->
            <view class="info-item" v-if="carmine.card_no">
              <view class="info-label">卡号：</view>
              <view class="info-value card-secret">{{ getDisplayCardInfo(carmine, viewedCardNos.includes(carmine.id || index), 'card_no') }}</view>
              <view class="action-buttons">
                <view v-if="!viewedCardNos.includes(carmine.id || index) && countdownFinished" class="copy-icon" @click="handleCardNoView(carmine, index)">
                  <image src="/static/Images/user/Yincang.png" mode="aspectFit"></image>
                </view>
                <view v-if="viewedCardNos.includes(carmine.id || index)" class="copy-icon" @click="handleCardNoCopy(carmine)">
                  <image src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>
            
            <!-- 卡密信息 -->
            <view class="info-item">
              <view class="info-label">卡密：</view>
              <view class="info-value card-secret">{{ getDisplayCardInfo(carmine, viewedCards.includes(carmine.id || index), 'carmine') }}</view>
              <view class="action-buttons">
                <view v-if="!viewedCards.includes(carmine.id || index) && countdownFinished" class="copy-icon" @click="handleCarmineView(carmine, index)">
                  <image src="/static/Images/user/Yincang.png" mode="aspectFit"></image>
                </view>
                <view v-if="viewedCards.includes(carmine.id || index)" class="copy-icon" @click="handleCarmineCopy(carmine)">
                  <image src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
                </view>
              </view>
            </view>
            
            <!-- 激活地址 -->
            <view class="info-item" v-if="carmine.charge_address">
              <view class="info-label">激活地址：</view>
              <view class="info-value">{{ carmine.charge_address }}</view>
              <view class="copy-icon" @click="handleChargeAddressCopy(carmine)">
                <image src="/static/Images/team/Fuzhi.png" mode="aspectFit"></image>
              </view>
            </view>
            
            <!-- 售后时间 -->
            <view class="info-item" v-if="carmine.end_time">
              <view class="info-label">售后时间：</view>
              <view class="info-value">{{ formatTime(carmine.end_time) }}</view>
            </view>
          </view>
          
          <!-- 倒计时提示 -->
          <view class="countdown-notice" v-if="!countdownFinished">
            <view class="countdown-text">卡密提取倒计时：{{ countdownTime }}秒</view>
            <view class="countdown-desc">为保护您的权益，请等待倒计时结束后查看卡密</view>
          </view>
        </view>
      </template>
      
      <view class="info-item">
        <view class="info-label">订单编号：</view>
        <view class="info-value">{{ orderInfo.orderNumber }}</view>
        <view class="copy-btn" @click="copyOrderNumber">
          <image class="copy-icon" src="/static/Images/order/Fuzhi.png" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="info-item" v-if="orderInfo.accountNumber">
        <view class="info-label">充值账号：</view>
        <view class="info-value">{{ orderInfo.accountNumber }}</view>
        <view class="copy-btn" @click="copyAccountNumber">
          <image class="copy-icon" src="/static/Images/order/Fuzhi.png" mode="aspectFit"></image>
        </view>
      </view>
      
      <view class="info-item">
        <view class="info-label">下单时间：</view>
        <view class="info-value">{{ orderInfo.orderTime }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">付款时间：</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.payTime }">{{ orderInfo.payTime || '等待完成' }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">发货时间：</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.deliveryTime }">{{ orderInfo.deliveryTime || '等待完成' }}</view>
      </view>
      
      <view class="info-item">
        <view class="info-label">成交时间：</view>
        <view class="info-value" :class="{ 'pending-status': !orderInfo.completeTime }">{{ orderInfo.completeTime || '等待完成' }}</view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-actions" v-if="orderData">
      <!-- 订单状态为4时显示 -->
      <template v-if="orderData.status == 4 || orderData.status == 5 || orderData.status == 0 || orderData.status == 6 ">
        <view class="action-btn secondary" @click="applyAfterSale">申请售后</view>
        <view class="action-btn primary" @click="buyAgain">再充一笔</view>
      </template>
      
      <!-- 订单状态为2时显示 -->
      <template v-else-if="orderData.status == 2">
        <view class="action-btn secondary" @click="contactService">联系客服</view>
        <view class="action-btn primary" @click="refundNow">立即退款</view>
      </template>
      
      <!-- 订单状态为3时显示 -->
      <template v-else-if="orderData.status == 3">
        <view class="action-btn secondary" @click="contactService">联系客服</view>
        <view class="action-btn primary" @click="confirmReceipt">确认收货</view>
      </template>
      <template v-else-if="orderData.status == 1">
        <view class="action-btn secondary" @click="cancelOrder">取消订单</view>
        <view class="action-btn primary" @click="showPaymentModal">立即支付</view>
      </template>
    </view>
    
    <!-- 支付弹窗 -->
    <Goodsbuy 
      :visible="showPayment" 
      :goodsInfo="{
        title: orderData && orderData.goods_name ? orderData.goods_name : '',
        price: orderData && orderData.amount ? orderData.amount : '',
        stock: '999',
        image: orderData && orderData.goods_image ? orderData.goods_image : ''
      }"
      :accountNumber="orderData && orderData.account ? orderData.account : ''"
      :orderId="orderData && orderData.id ? orderData.id : ''"
      @close="showPayment = false"
      @pay="handlePaymentSuccess"
    />
  </view>
</template>

<script>
import { goodsApi } from '@/utils/api.js'
import { userStorage } from '@/utils/storage.js';
import Goodsbuy from '@/components/Goodsbuy.vue';

export default {
  components: {
    Goodsbuy
  },
  data() {
    return {
      orderId: null,
      orderData: null,
      showPayment: false,
      orderInfo: {
        orderNumber: '',
        accountNumber: '',
        amount: '',
        orderTime: '',
        payTime: '',
        deliveryTime: '',
        completeTime: ''
      },
      // 卡密相关数据
      countdownTime: 60,
      countdownFinished: false,
      countdownTimer: null,
      viewedCards: [], // 记录已查看的卡密ID数组
      viewedCardNos: [], // 记录已查看的卡号ID数组
      statusConfig: {
        1: {
          text: '已创建，等待支付',
          autoReceiveText: '请尽快完成支付',
          statusImage: '/static/Images/order/Daiwancheng.png'
        },
        2: {
          text: '已支付，权益充值中',
          autoReceiveText: '权益充值中，请耐心等待',
          statusImage: '/static/Images/order/Jinxingzhong.svg'
        },
        3: {
          text: '已充值，等待到账',
          autoReceiveText: '权益充值中，请耐心等待',
          statusImage: '/static/Images/order/Jinxingzhong.svg'
        },
        4: {
          text: '订单已完成',
          autoReceiveText: '权益充值成功，订单已完成',
          statusImage: '/static/Images/order/Yiwancheng.png'
        }
      },
      progressSteps: [
        { title: '创建成功，等待支付中', status: 1, time: '' },
        { title: '支付成功，权益充值中', status: 2, time: '' },
        { title: '充值完成，等待到账中', status: 3, time: '' },
        { title: '充值成功，订单已完成', status: 4, time: '' }
      ]
    };
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.fetchOrderDetail();
    }
  },
  onUnload() {
    // 清理倒计时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
      this.countdownTimer = null;
    }
  },
  computed: {
    currentStatus() {
      return this.orderData ? this.orderData.status : 1;
    },
    statusInfo() {
      const config = this.statusConfig[this.currentStatus] || this.statusConfig[1];
      const steps = this.progressSteps.map((step, index) => {
        let stepStatus = 'pending';
        if (step.status <= this.currentStatus) {
          stepStatus = step.status === this.currentStatus ? 'current' : 'completed';
        }
        return {
          ...step,
          status: stepStatus
        };
      });
      return {
        ...config,
        progressSteps: steps
      };
    },
    productInfo() {
      if (this.orderData && this.orderData.list && this.orderData.list.length > 0) {
        return this.orderData.list[0];
      }
      return null;
    }
  },
  methods: {
    async fetchOrderDetail() {
        try {
          const token = userStorage.getToken();
          if (!token) {
            uni.showToast({
              title: '请先登录',
              icon: 'none'
            });
            return;
          }

          const response = await goodsApi.userOrderInfo(this.orderId);

        if (response.code === 1) {
          this.orderData = response.data;
          this.updateOrderInfo();
        } else {
          uni.showToast({
            title: response.msg || '获取订单详情失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('获取订单详情失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    },
    updateOrderInfo() {
      if (!this.orderData) return;
      
      const data = this.orderData;
      const productData = this.productInfo;
      
      this.orderInfo = {
        orderNumber: data.order_no || '',
        accountNumber: productData ? productData.accounts : '',
        amount: data.money || '0.00',
        orderTime: this.formatTime(data.create_time),
        payTime: data.start_time ? this.formatTime(data.start_time) : '',
        deliveryTime: data.wuliu_time ? this.formatTime(data.wuliu_time) : '',
        completeTime: data.end_time ? this.formatTime(data.end_time) : ''
      };
      
      // 更新进度时间
      if (this.progressSteps.length >= 1) this.progressSteps[0].time = this.orderInfo.orderTime;
      if (this.progressSteps.length >= 2 && this.orderInfo.payTime) this.progressSteps[1].time = this.orderInfo.payTime;
      if (this.progressSteps.length >= 3 && this.orderInfo.deliveryTime) this.progressSteps[2].time = this.orderInfo.deliveryTime;
      if (this.progressSteps.length >= 4 && this.orderInfo.completeTime) this.progressSteps[3].time = this.orderInfo.completeTime;
      
      // 如果是卡密订单且有卡密数据，启动倒计时
      if (data.type == 3 && data.carmines && data.carmines.length > 0) {
        this.startCountdown();
      }
    },
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp * 1000);
      return date.getFullYear() + '-' + 
             String(date.getMonth() + 1).padStart(2, '0') + '-' + 
             String(date.getDate()).padStart(2, '0') + ' ' + 
             String(date.getHours()).padStart(2, '0') + ':' + 
             String(date.getMinutes()).padStart(2, '0') + ':' + 
             String(date.getSeconds()).padStart(2, '0');
    },
    goBack() {
      uni.navigateBack();
    },
    copyOrderNumber() {
      uni.setClipboardData({
        data: this.orderInfo.orderNumber,
        success: () => {
          uni.showToast({
            title: '订单编号已复制',
            icon: 'none'
          });
        }
      });
    },
    copyAccountNumber() {
      uni.setClipboardData({
        data: this.orderInfo.accountNumber,
        success: () => {
          uni.showToast({
            title: '充值账号已复制',
            icon: 'none'
          });
        }
      });
    },
    applyAfterSale() {
      uni.showToast({
        title: '申请售后功能开发中',
        icon: 'none'
      });
    },
    buyAgain() {
      // 获取商品ID
      if (!this.orderData || !this.orderData.list || this.orderData.list.length === 0) {
        uni.showToast({
          title: '无法获取商品信息',
          icon: 'none'
        });
        return;
      }
      
      const goodsId = this.orderData.list[0].goods_id;
      if (!goodsId) {
        uni.showToast({
          title: '商品ID不存在',
          icon: 'none'
        });
        return;
      }
      
      // 跳转到商品详情页面
      uni.navigateTo({
        url: `/pages/goods/goodsdetail?id=${goodsId}`
      });
    },
    
    // 联系客服
    contactService() {
      // 跳转到客服页面或打开客服对话
      uni.navigateTo({
        url: '/pages/common/service'
      });
    },
    
    // 立即退款
    refundNow() {
      // 处理退款逻辑
      uni.showModal({
        title: '确认退款',
        content: '确定要申请退款吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用退款接口
            this.processRefund();
          }
        }
      });
    },
    
    // 确认收货
    confirmReceipt() {
      // 确认收货逻辑
      uni.showModal({
        title: '确认收货',
        content: '确定已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用确认收货接口
            this.processConfirmReceipt();
          }
        }
      });
    },
    
    // 处理退款
    async processRefund() {
      try {
        uni.showLoading({ title: '处理中...' });
        // 这里调用退款API
        // const result = await api.refundOrder(this.orderDetail.id);
        uni.hideLoading();
        uni.showToast({
          title: '退款申请已提交',
          icon: 'success'
        });
        // 刷新订单详情
        this.fetchOrderDetail();
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: '退款申请失败',
          icon: 'error'
        });
      }
    },
    
    // 处理确认收货
    async processConfirmReceipt() {
      try {
        uni.showLoading({ title: '处理中...' });
        
        const result = await goodsApi.confirmOrder({
          order_id: this.orderData.id
        });
        
        uni.hideLoading();
        
        if (result.code === 1) {
          uni.showToast({
            title: '确认收货成功',
            icon: 'success'
          });
          
          // 刷新订单详情
          setTimeout(() => {
            this.fetchOrderDetail();
          }, 1000);
        } else {
          uni.showToast({
            title: result.msg || '确认收货失败',
            icon: 'error'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('确认收货失败:', error);
        uni.showToast({
          title: '确认收货失败',
          icon: 'error'
        });
      }
     },
     
     // 显示支付弹窗
     showPaymentModal() {
       this.showPayment = true;
     },
     
     // 处理支付成功
     handlePaymentSuccess(paymentData) {
       console.log('支付成功:', paymentData);
       this.showPayment = false;
       
       uni.showToast({
         title: '支付成功',
         icon: 'success'
       });
       
       // 刷新订单详情
       setTimeout(() => {
         this.fetchOrderDetail();
       }, 1500);
     },
     
     // 取消订单
     cancelOrder() {
       uni.showModal({
         title: '确认取消',
         content: '确定要取消此订单吗？',
         success: (res) => {
           if (res.confirm) {
             this.processCancelOrder();
           }
         }
       });
     },
    
    // 处理取消订单
    async processCancelOrder() {
      try {
        uni.showLoading({ title: '处理中...' });
        
        const result = await goodsApi.orderCancel({
          order_id: this.orderData.id
        });
        
        uni.hideLoading();
        
        if (result.code === 1) {
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          });
          
          // 刷新订单详情
          setTimeout(() => {
            this.fetchOrderDetail();
          }, 1000);
        } else {
          uni.showToast({
            title: result.msg || '取消订单失败',
            icon: 'error'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('取消订单失败:', error);
        uni.showToast({
          title: '取消订单失败',
          icon: 'error'
        });
      }
     },
     
     // 卡密相关方法
     // 开始倒计时
     startCountdown() {
       if (this.countdownTimer) {
         clearInterval(this.countdownTimer);
       }
       
       this.countdownTime = 60;
       this.countdownFinished = false;
       
       this.countdownTimer = setInterval(() => {
         this.countdownTime--;
         if (this.countdownTime <= 0) {
           this.countdownFinished = true;
           clearInterval(this.countdownTimer);
           this.countdownTimer = null;
         }
       }, 1000);
     },
     
     // 卡密显示工具函数
     maskCardInfo(cardInfo) {
       if (!cardInfo || cardInfo.length <= 4) return cardInfo;
       const start = cardInfo.substring(0, 2);
       const end = cardInfo.substring(cardInfo.length - 2);
       const middle = '*'.repeat(Math.min(6, cardInfo.length - 4));
       return start + middle + end;
     },
     
     // 获取显示的卡密信息
     getDisplayCardInfo(carmine, isViewed = false, fieldType = 'carmine') {
       let cardInfo = '';
       if (fieldType === 'card_no') {
         cardInfo = carmine.card_no || '';
       } else {
         cardInfo = carmine.carmine || '';
       }
       return isViewed ? cardInfo : this.maskCardInfo(cardInfo);
     },
     
     // 处理查看卡号
     handleCardNoView(carmine, index) {
       const cardId = carmine.id || index;
       if (!this.viewedCardNos.includes(cardId)) {
         this.viewedCardNos.push(cardId);
         uni.showToast({
           title: '已显示完整卡号',
           icon: 'success',
           duration: 1500
         });
       }
     },
     
     // 处理复制卡号
     handleCardNoCopy(carmine) {
       const copyData = carmine.card_no || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '卡号复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       }
     },
     
     // 处理查看卡密
     handleCarmineView(carmine, index) {
       const cardId = carmine.id || index;
       if (!this.viewedCards.includes(cardId)) {
         this.viewedCards.push(cardId);
         uni.showToast({
           title: '已显示完整卡密',
           icon: 'success',
           duration: 1500
         });
       }
     },
     
     // 处理复制卡密
     handleCarmineCopy(carmine) {
       const copyData = carmine.carmine || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '卡密复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       }
     },
     
     // 处理复制激活地址
     handleChargeAddressCopy(carmine) {
       const copyData = carmine.charge_address || '';
       
       if (copyData) {
         uni.setClipboardData({
           data: copyData,
           success: () => {
             uni.showToast({
               title: '激活地址复制成功',
               icon: 'success'
             });
           },
           fail: () => {
             uni.showToast({
               title: '复制失败',
               icon: 'error'
             });
           }
         });
       }
     },
      
      // 获取状态图标
       getStatusIcon(status) {
         const iconMap = {
           'pending': '/static/Images/order/Daiwancheng.png',
           'current': '/static/Images/order/Yiwancheng.png',
           'completed': '/static/Images/order/Yiwancheng.png'
         };
         return iconMap[status] || iconMap['pending'];
       }
  }
};
</script>

<style lang="scss" scoped>
.order-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.page-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
  text-align: center;
}

.placeholder {
  width: 60rpx;
}

/* 订单状态卡片 */
.order-status-card {
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-info {
  flex: 1;
}

.status-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}

.auto-receive-text {
  font-size: 26rpx;
  color: #ff4d4f;
}

.delivery-image {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

.delivery-image.status-animating {
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* 充值进度卡片 */
.recharge-progress-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.progress-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  position: relative;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-item::before {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 50rpx;
  width: 2rpx;
  height: calc(100% + 10rpx);
  background-color: #e0e0e0;
  z-index: 1;
}

.progress-item:last-child::before {
  display: none;
}

.progress-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  position: relative;
  z-index: 2;
}

.status-icon {
  width: 40rpx;
  height: 40rpx;
}

.progress-item.current .status-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.progress-content {
  flex: 1;
}

.progress-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 6rpx;
}

.progress-time {
  font-size: 24rpx;
  color: #999999;
}

.progress-item.completed .progress-icon {
  background-color: #f6ffed;
}

.progress-item.current .progress-icon {
  background-color: #fff7e6;
}

.progress-item.pending .progress-icon {
  background-color: #f5f5f5;
}

/* 商品信息卡片 */
.product-info-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.product-name {
  font-size: 36rpx;
  color: #333333;
  line-height: 1.5;
}

/* 订单信息卡片 */
.order-info-card {
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

/* 状态图片容器 */
.status-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 100px;
}

.delivery-image {
  height: inherit;
  width: 145px;
}

/* 商品信息容器 */
.product-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f5f5f5;
}

.product-thumb {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  width: 160rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
}

.info-value.price {
  color: #ff4d4f;
  font-weight: 500;
}

.info-value.pending-status {
  color: #999999;
}

.copy-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy-icon {
  width: 30rpx;
  height: 30rpx;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.action-btn.primary {
  background-color: #ff4d4f;
  color: #ffffff;
}

.action-btn.secondary {
  background-color: #ffffff;
  color: #333333;
  border: 1rpx solid #dddddd;
}
</style>